<template>
  <view>
    <scroll-view enable-back-to-top scroll-y class="viewport">
      <!-- 基本信息 -->
      <view class="goods">
        <!-- 商品主图 -->
        <view class="preview">
          <swiper circular>
            <swiper-item>
              <image class="image" mode="aspectFill" src="../../static/images/lj.png" />
            </swiper-item>
            <swiper-item>
              <image class="image" mode="aspectFill" src="../../static/images/lj1.png" />
            </swiper-item>
          </swiper>
        </view>

        <!-- 商品简介 -->
        <view class="meta">
          <view class="price">
            <text class="symbol">选择垃圾桶进行绑定下单</text>
            <text class="number">{{ goods?.price }}</text>
          </view>
        </view>

        <!-- 操作面板 -->
        <view class="action">
          <view @tap="openPopup('laji')" class="item arrow">
            <text class="label">绑定</text>
            <text class="text ellipsis"> 我的垃圾桶 </text>
          </view>
          <view @tap="openPopup('dingdan')" class="item arrow">
            <text class="label">垃圾桶</text>
            <text class="text ellipsis"> 下单 </text>
          </view>
          <view class="item">
            <text class="label">服务</text>
            <text class="text ellipsis"> 快速处理 无忧服务 </text>
          </view>
        </view>
      </view>

      <!-- 商品详情 -->
      <view class="detail panel">
        <view class="title">
          <text>使用说明：</text>
        </view>
        <view class="content" style="margin: 0 10px; padding: 10px 0">
          <!-- 图片详情 -->
          <text style="font-size: 14px; padding: 90px 40px"
            >您可选择附近想要的垃圾桶进行绑定操作，绑定之后即可进行下单操作；工作人员将会接到相应订单进行处理；</text
          >
        </view>
      </view>

      <!-- 同类推荐 -->
    </scroll-view>
    <!-- 底部导航 -->
    <!-- <van-popup  round position="bottom" :style="{ height: '30%' }" /> -->
    <view class="">
      <van-tabbar :active="active" @change="onChange">
        <van-tabbar-item @click="goSwitch('/pages/user/index')">
          <image
            src="../../static/tabs/category_selected.png"
            alt="admin"
            width="10px"
            height="10px"
          />
          垃圾桶
        </van-tabbar-item>
        <van-tabbar-item @click="goSwitch('/pages/userMe/index')">
          <image src="../../static/tabs/user_default.png" alt="admin" width="10px" />
          我的
        </van-tabbar-item>
      </van-tabbar>
    </view>
  </view>
  <!-- uni-ui 弹出层 -->
  <uni-popup ref="popup" type="bottom" background-color="#fff">
    <AddressPanel
      v-if="popupName === 'laji'"
      @close="close"
      :wxUser="wxUser"
      :trashcans="trashcans"
    />
    <ServicePanel v-if="popupName === 'dingdan'" @close="close" :wxUser="wxUser" />
  </uni-popup>
</template>

<script>
import AddressPanel from './components/AddressPanel.vue'
import ServicePanel from './components/ServicePanel.vue'
import { getalltrashcans } from '@/services/login'
export default {
  components: {
    ServicePanel,
    AddressPanel,
  },
  data() {
    return {
      show: '',
      popupName: '',
      currentIndex: 0,
      active: 0, //高亮的图标的标
      trashcans: [],
      goods: [
        {
          mainPictures: '../../static/images/lj.png',
        },
        {
          mainPictures: '../../static/images/lj1.png',
        },
      ],
    }
  },
  async onShow() {
    console.log(1111)
    this.active = 0 //为了防止tabbar图标高亮切换卡顿问题
    this.wxUser = uni.getStorageSync('wxuser')
    console.log(this.wxUser, 'this.wxUser')
    const res = await getalltrashcans()
    this.trashcans = res.trashcans
    console.log(res.trashcans, '2131231')
    if (res.trashcans.length > 0) {
      console.log('Hahahahah')
      this.trashcans = this.trashcans.map((v) => ({
        value: v.trashcan_id,
        text: `编号${v.trashcan_id}`,
      }))
      console.log(this.trashcans, 'trashcans')
    }
    uni.hideTabBar() //隐藏掉原始的tabbar
  },
  methods: {
    openPopup(name) {
      this.popupName = name
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    onChange(e) {
      this.active = e.detail
    },
    goSwitch(url) {
      uni.switchTab({
        url: url,
      })
    },
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.viewport {
  background-color: #f4f4f4;
}

.panel {
  margin-top: 20rpx;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90rpx;
    line-height: 1;
    padding: 30rpx 60rpx 30rpx 6rpx;
    position: relative;
    text {
      padding-left: 10rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      border-left: 4rpx solid #27ba9b;
    }
    navigator {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.arrow {
  &::after {
    position: absolute;
    top: 50%;
    right: 30rpx;
    content: '\e6c2';
    color: #ccc;
    font-family: 'erabbit' !important;
    font-size: 32rpx;
    transform: translateY(-50%);
  }
}

/* 商品信息 */
.goods {
  background-color: #fff;
  .preview {
    height: 750rpx;
    position: relative;
    .image {
      width: 750rpx;
      height: 750rpx;
    }
    .indicator {
      height: 40rpx;
      padding: 0 24rpx;
      line-height: 40rpx;
      border-radius: 30rpx;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
      .current {
        font-size: 26rpx;
      }
      .split {
        font-size: 24rpx;
        margin: 0 1rpx 0 2rpx;
      }
      .total {
        font-size: 24rpx;
      }
    }
  }
  .meta {
    position: relative;
    border-bottom: 1rpx solid #eaeaea;
    .price {
      height: 130rpx;
      padding: 25rpx 30rpx 0;
      color: #fff;
      font-size: 34rpx;
      box-sizing: border-box;
      background-color: #35c8a9;
    }
    .number {
      font-size: 56rpx;
    }
    .brand {
      width: 160rpx;
      height: 80rpx;
      overflow: hidden;
      position: absolute;
      top: 26rpx;
      right: 30rpx;
    }
    .name {
      max-height: 88rpx;
      line-height: 1.4;
      margin: 20rpx;
      font-size: 32rpx;
      color: #333;
    }
    .desc {
      line-height: 1;
      padding: 0 20rpx 30rpx;
      font-size: 24rpx;
      color: #cf4444;
    }
  }
  .action {
    padding-left: 20rpx;
    .item {
      height: 90rpx;
      padding-right: 60rpx;
      border-bottom: 1rpx solid #eaeaea;
      font-size: 26rpx;
      color: #333;
      position: relative;
      display: flex;
      align-items: center;
      &:last-child {
        border-bottom: 0 none;
      }
    }
    .label {
      width: 80rpx;
      color: #898b94;
      margin: 0 16rpx 0 10rpx;
    }
    .text {
      flex: 1;
      -webkit-line-clamp: 1;
    }
  }
}

/* 商品详情 */
.detail {
  padding-left: 20rpx;
  .content {
    margin-left: -20rpx;
    .image {
      width: 100%;
    }
  }
  .properties {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    .item {
      display: flex;
      line-height: 2;
      padding: 10rpx;
      font-size: 26rpx;
      color: #333;
      border-bottom: 1rpx dashed #ccc;
    }
    .label {
      width: 200rpx;
    }
    .value {
      flex: 1;
    }
  }
}

/* 同类推荐 */
.similar {
  .content {
    padding: 0 20rpx 20rpx;
    background-color: #f4f4f4;
    display: flex;
    flex-wrap: wrap;
    .goods {
      width: 340rpx;
      padding: 24rpx 20rpx 20rpx;
      margin: 20rpx 7rpx;
      border-radius: 10rpx;
      background-color: #fff;
    }
    .image {
      width: 300rpx;
      height: 260rpx;
    }
    .name {
      height: 80rpx;
      margin: 10rpx 0;
      font-size: 26rpx;
      color: #262626;
    }
    .price {
      line-height: 1;
      font-size: 20rpx;
      color: #cf4444;
    }
    .number {
      font-size: 26rpx;
      margin-left: 2rpx;
    }
  }
  navigator {
    &:nth-child(even) {
      margin-right: 0;
    }
  }
}

/* 底部工具栏 */
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc((var(--window-bottom)));
  z-index: 1;
  background-color: #fff;
  height: 100rpx;
  padding: 0 20rpx;
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
  .buttons {
    display: flex;
    & > view {
      width: 220rpx;
      text-align: center;
      line-height: 72rpx;
      font-size: 26rpx;
      color: #fff;
      border-radius: 72rpx;
    }
    .addcart {
      background-color: #ffa868;
    }
    .payment {
      background-color: #27ba9b;
      margin-left: 20rpx;
    }
  }
  .icons {
    padding-right: 20rpx;
    display: flex;
    align-items: center;
    flex: 1;
    // 兼容 H5 端和 App 端的导航链接样式
    .navigator-wrap,
    .icons-button {
      flex: 1;
      text-align: center;
      line-height: 1.4;
      padding: 0;
      margin: 0;
      border-radius: 0;
      font-size: 20rpx;
      color: #333;
      background-color: #fff;
      &::after {
        border: none;
      }
    }
    text {
      display: block;
      font-size: 34rpx;
    }
  }
}
</style>
